<!-- <script setup lang="ts">
defineProps<{
  options: {
    label: string
    value: string | number
  }[]
  modelValue?: number | string
}>()
const emit = defineEmits<{
  (e: 'update:model-value', value: number | string): void
}>()
</script>

<template>
  <div class="cp-radio-btn">
    <a
      v-for="(item, index) in options"
      :key="index"
      class="item"
      href="javascript:;"
      :class="{ active: modelValue === item.value }"
      @click="emit('update:model-value', item.value)"
      >{{ item.label }}</a
    >
  </div>
</template>

<style lang="scss" scoped>
.cp-radio-btn {
  display: flex;
  flex-wrap: wrap;

  .item {
    height: 32px;
    min-width: 60px;
    line-height: 30px;
    padding: 0 14px;
    text-align: center;
    border: 1px solid var(--cp-bg);
    background-color: var(--cp-bg);
    margin-right: 10px;
    box-sizing: border-box;
    color: var(--cp-text2);
    margin-bottom: 10px;
    border-radius: 4px;
    transition: all 0.3s;

    &.active {
      border-color: var(--cp-primary);
      background-color: var(--cp-plain);
    }
  }
}
</style> -->

<script setup lang="ts">
defineProps<{
  options: {
    label: string
    value: number | string
  }[]
  modelValue?: number
  disabled?: boolean
}>()
const emit = defineEmits<{
  (e: 'update:model-value', value: number | string): void
}>()
</script>

<template>
  <div class="cp-radio-btn">
    <a
      v-for="(item, index) in options"
      :key="index"
      class="item"
      href="javascript:;"
      :class="{ active: modelValue === item.value, disabled }"
      @click="emit('update:model-value', item.value)"
      >{{ item.label }}</a
    >
  </div>
</template>

<style lang="scss" scoped>
.cp-radio-btn {
  display: flex;
  flex-wrap: wrap;

  .item {
    height: 32px;
    min-width: 60px;
    line-height: 30px;
    padding: 0 14px;
    text-align: center;
    border: 1px solid var(--cp-bg);
    background-color: var(--cp-bg);
    margin-right: 10px;
    box-sizing: border-box;
    color: var(--cp-text2);
    margin-bottom: 10px;
    border-radius: 4px;
    transition: all 0.3s;

    &.active {
      border-color: var(--cp-primary);
      background-color: var(--cp-plain);
    }
    &.disabled {
      pointer-events: none;
      filter: alpha(opacity=50); /*IE滤镜，透明度50%*/
      -moz-opacity: 0.5; /*Firefox私有，透明度50%*/
      opacity: 0.5; /*其他，透明度50%*/
    }
  }
}
</style>
